<template>
   <div>
       <header>
           <div class="user-head-bg">
               <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534064206243&di=7a89771f24d3a47aded6a6458ba4a7bd&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F12%2F99%2F55%2F83s58PICzIx.jpg">
           </div>
           <div class="user-head">
               <div class="user-head-top text-right">
                   <a href="/user/uedit"><span class="glyphicon glyphicon-cog"></span></a>
               </div>
               <div class="user-head-base">
                   <div class="user-head-img text-center">
                       <img src="http://img3.imgtn.bdimg.com/it/u=1308945417,3718582966&fm=26&gp=0.jpg" class="img-circle" id="u-img">
                   </div>
                   <div class="user-head-bottom text-center">
                       <div class="user-head-name">
                           <p >liliyifeng</p>
                       </div>
                       <div class="u-rank" data-container="body" data-toggle="popover" data-placement="bottom"
                            data-content="">
                           <!--/{{ directory }}/image/base/rank_icon.png?d-->
                           <img src="http://img3.imgtn.bdimg.com/it/u=1308945417,3718582966&fm=26&gp=0.jpg">
                           <span id="u-rank-name">获取中</span>
                       </div>
                   </div>
                   <small class="user-head-sign"><u style="color: #fff;font-size: 4vw;" onclick="showCreateExtensionQr()">生成邀请码</u></small>
               </div>
           </div>
       </header>
   </div>
</template>

<script>
    export default {
        name: "address"
    }
</script>

<style scoped>
    header{
        height: 50vw;
    }
    header .user-head-bg{
        position: absolute;
        left: 0;
        right: 0;
        height: 50vw;
        background-color: #000;;
    }
    header .user-head-bg img{
        width: 100vw;
        height: 50vw;
        opacity: .6;
    }
    header .user-head{
        background: #fff;
        height: 50vw;
        width: 100vw;
    }
    header .user-head .user-head-top{
        padding-right: 3vw;
        padding-top: 3vw;
    }
    header .user-head .user-head-top .glyphicon{
        font-size: 8vw;
        color: #fff;
    }
    header .user-head .user-head-base{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
    }
    header .user-head .user-head-base .user-head-img{
        margin: 4vw;
    }
    header .user-head .user-head-base .user-head-img img{
        width: 17.5vw;
        height: 17.5vw;
        position: relative;
    }
    header .user-head .user-head-base .u-rank{
        margin-top: 2vw;
        width: 20vw;
        /*position: absolute;*/
        background: #33bb0a;
        border-radius: 0 5vw;
        color: #fff;
        padding: 1vw 3vw;
    }
    header .user-head .user-head-base .u-rank img{
        width: 5vw;
    }
    /*header .user-head .user-head-img img {
        width: 25vw;
        position: relative;
    }*/
    header .user-head .user-head-bottom {
        height: 17.5vw;
        width: 50%;
        position: relative;
        margin: 4vw;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    header .user-head .user-head-bottom .user-head-name{
        margin-bottom: 2vw;
    }
    header .user-head .user-head-base small{
        margin-right: 0;
        font-family: cursive;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        width: 80%;
    }
</style>